<template>
  <div>
    <div class="text-center mb-[20px]">
      <UserAvatar :img="model.avatar" />
    </div>
    <el-descriptions :column="1" border label-width="150">
      <el-descriptions-item
        label-class-name="label-required"
        :label="t('account.fields.accountType')"
        width="280"
      >
        <el-tag v-if="model.accountType === 1">{{ t('account.profile.accountType1') }}</el-tag>
        <el-tag v-if="model.accountType === 2">{{ t('account.profile.accountType2') }}</el-tag>
        <el-tag v-if="model.accountType === 3">{{ t('account.profile.accountType3') }}</el-tag>
        <el-tag v-if="model.accountType === 4">{{ t('account.profile.accountType4') }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item
        label-class-name="label-required"
        :label="t('account.fields.username')"
        width="280"
      >
        {{ model.username }}
      </el-descriptions-item>
      <el-descriptions-item
        label-class-name="label-required"
        :label="t('account.fields.phone')"
        width="280"
      >
        {{ model.phone }}
      </el-descriptions-item>
      <el-descriptions-item
        label-class-name="label-required"
        :label="t('account.fields.nickname')"
        width="280"
      >
        {{ model.nickname }}
      </el-descriptions-item>
      <el-descriptions-item
        label-class-name="label-required"
        :label="t('account.fields.loginIp')"
        width="280"
      >
        {{ model.loginIp }}
      </el-descriptions-item>
      <el-descriptions-item
        label-class-name="label-required"
        :label="t('account.fields.loginDate')"
        width="280"
      >
        {{ formatDate(model.loginDate) }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script lang="ts" setup>
import UserAvatar from './UserAvatar.vue'
import { formatDate } from '@/utils/formatTime'
import { AccountVO } from '@/api/system/account'

defineOptions({ name: 'ProfileUser' })

const model = defineModel<AccountVO>({ required: true })

const { t } = useI18n()
</script>

<style scoped>
.text-center {
  position: relative;
  height: 120px;
  text-align: center;
}
</style>
